<template>
  <!-- 带鼠标进入上移动画的卡片 -->
  <!-- 
    background:是底部文字的背景颜色
    padding:是整个盒子的内边距
    nameSize：是第一行文字的大小
    descSize：是第二行文字的大小
    priceSize：是第三行的文字大小
    width:是图片的宽度
    move：是动画id
     -->
  <div
    class="myCard"
    :class="move ? 'move' : ''"
    @mouseenter="move = true"
    @mouseleave="move = false"
    :style="'padding:' + padding"
  >
    <!-- <router-link to="url"></router-link> -->
    <!-- <img :src="img" alt="" /> -->
    <!-- <el-image :style="'width:' + width + ';'" :src="img" lazy></el-image> -->
    <img
      v-lazyload="img"
      alt=""
      :style="'width:' + width + ';height:' + imgHeight"
    />
    {{ imgHeight }}
    <div class="con" :style="'background:' + background">
      {{ namePadding }}
      <p
        class="name"
        :style="'font-size:' + nameSize + ';padding:' + namePadding"
      >
        {{ name }}
      </p>
      <p
        v-if="desc"
        class="desc"
        :style="'font-size:' + descSize + ';padding:' + namePadding"
      >
        {{ desc }}
      </p>
      <p
        v-if="price"
        class="price"
        :style="'font-size:' + priceSize + ';padding:' + namePadding"
      >
        ￥{{ price }}
      </p>
    </div>
    <router-link class="route" :to="to"></router-link>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    img: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    price: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
    background: {
      type: String,
      default: "",
    },
    width: {
      type: String || Number,
      default: "100%",
    },
    imgHeight: {
      type: String || Number,
      default: "100%",
    },

    padding: {
      type: String,
      default: "",
    },
    nameSize: {
      type: String,
      default: "16px",
    },
    descSize: {
      type: String,
      default: "18px",
    },
    priceSize: {
      type: String,
      default: "18px",
    },
    namePadding: {
      type: String,
      default: "",
    },
    to: {
      type: String,
      default: "",
    },
  },
  name: "myCard",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({
      move: false,
    });
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myCard {
  width: 100%;
  cursor: pointer;
  transition: all 0.6s;
  height: 100%;
  position: relative;
  font-size: 0;
  a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .con {
    width: 100%;
    text-align: center;
    padding-bottom: 12px;
    // padding:
    p {
      font-size: 22px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price {
      color: #cf4444;
    }
    .desc {
      color: #999999;
    }
  }
  .route {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.move {
  box-shadow: 0px 0px 6px -2px #000;
  transform: translateY(-5px);
}
// .move-enter-active,
// .move-leave-active {
//   transition: all .5s linear;
// }
// /* 定义进入过渡生效时的状态 */
// .move-enter-active {
//   opacity: 0;
// }
// /* 定义进入过渡的结束状态 */
// .move-enter-to {
//   opacity: 1;
// }
// /* 定义离开过渡的开始状态 */
// .move-leave-active {
//   opacity: 1;
// }
// /* 定义离开过渡的结束状态 */
// .move-leave-to {
//   opacity: 0;
// }
</style>